05 Preparando o terreno para o Webpack

Vamos abrir o Terminal, acessaremos a pasta do desktop digitando os seguintes comando:

Caelums-iMac:~caelum$ cd Desktop/projeto-webpack/
Caelums-iMac:projeto-webpack caelum$ ls
client server

Vamos listarmos com ls, lembrando que temos a pasta client, na qual está o projeto, assim como a server do servidor disponibilizado para o projeto.

Em seguida, entraremos dentro da pasta client também com um comando no servidor:

npm run watch

Com npm run watch, rodaremos o compilador em tempo real do Babel. Depois, abriremos uma nova aba do Terminal e entraremos dentro da pasta server:

npm start

Com o npm start, subiremos o novo servidor. Vamos digitar o endereço localhost:3000 no navegador e acessaremos o projeto. Se clicarmos em "Importar Negociações", importaremos as negociações da API.

Para introduzirmos o Webpack, começaremos a preparar a nossa estrutura. Vamos abrir o editor de texto (recomendamos o Visual Studio Code e apagaremos a pasta app, que é o resultado da compilação de app-src, em que ficam armazenados os arquivos originais do projeto.

Se você trabalha com ECMAScript ou React, vai encontrar uma pasta semelhante. Apagaremos a pasta app, porque a geração dos arquivos compilados pelo Babel será feita com o auxílio do Webpack mais adiante.

A seguir, acessaremos o index.html, abaixo da tag <div> com o id="negociacoes" encontraremos algumas tags <script> com o SystemJS:

<div id="negociacoes"></div>

<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.js"></script>
<script>
    System 
        .import('app/app.js')
        .catch(err => console.error(err)) 
</script>

Nós iremos remover o SystemJS e o comando que importa os módulos. O trecho será substituído pela tag <script> que importará o dist/bundle.js:

<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="dist/bundle.js"></script>

No caminho, especificaremos a pasta dist. Você pode questionar a existência da pasta dist e do arquivo recém adicionado, mas eles serão gerados futuramente pelo Webpack. Estamos preparando as bases para a aplicação funcionar bem com o Webpack.

O próximo passo será parar o servidor no Terminal, com o comando "Control + C" e teremos o seguinte retorno:

server caelum$

Acabamos de parar o processo de compilação em tempo real. Em seguida, dentro da pasta client, acessaremos o arquivo package.json:

"author": "",
"license": "ISC",
"dependencies": {
    "reflect-metada": "^0.1.10",
    "systemjs": "^0.20.12"
},
"devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-es2015-modules-systemjs": "^6.24.1",
    "babel-preset-es2017": "^6.24.1"
}

Em seguida, removeremos o systemjs e o babel-cli - a ferramenta de linha de comando que permite trabalharmos com o Babel. Nós não trabalharemos com essa ferramenta. Quem vai ser responsável por chamar o Babel e compilar o código, será o Webpack. Realizaremos a remoção de maneira elegante, por meio do Terminal, usando o comando a seguir:

client caelum$ npm uninstall babel-cli --save-dev

Removemos primeiro o babel-cli que está dentro de devDependencies. se retornarmos ao package.json, veremos que ele foi removido.

"devDependencies": {
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-es2015-modules-systemjs": "^6.24.1",
    "babel-preset-es2017": "^6.24.1"
}

Em seguida, vamos apagar o systemjs que está dentro de dependencies. De volta ao Terminal, digitaremos:

client caelum$ npm uninstall systemjs --save

Por enquanto, estamos apenas adaptando o projeto para trabalharmos com o Webpack. Se você usa o Angular CLI, react create app, Vue CLI, esses detalhes ficaram escondidos, neste curso, nós aprenderemos a essência do Webpack para entender cada um dos frameworks que o utilizam e nos sentirmos mais seguros. Por isso, começaremos por baixo.

Após as duas remoções, o próximo passo será instalar o Webpack. No caso, usaremos a versão 3.1.0, cuja homologação foi feita por mim. Não use versões anteriores, porque elas possuem bugs. Instalaremos também babel-core.

client caelum$ npm install webpack@3.1.0 babel-core@6.25.0 --save-dev

Nós desinstalamos o babel-cli e estamos este outro porque o Babel ainda será usado para a compilação dos arquivos. Nós vamos instalar o core, na versão 6.25.0 do Babel, que será chamado pelo Webpack para automatizar o processo. No Terminal, digitamos o --save-dev, por se tratar de uma dependêcia de desenvolvimento. Usaríamos apenas --save por ser uma dependência em tempo de produção.

Será feito rapidamente o download, em seguida, se acessarmos o arquivo package.json, veremos que o babel-core e o webpack foram instalados corretamente.

"devDependencies": {
    "babel-core": "^6.25.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-es2015-modules-systemjs": "^6.24.1",
    "babel-preset-es2017": "^6.24.1",
    "webpack": "^3.1.0"
} 

Temos o projeto, que não possui carregador de módulo, ou seja, sem o systemjs. Também não temos arquivos compilados, é o momento de configurar o Webpack para construir e empacotar os módulos da aplicação.